

<!DOCTYPE html>
<html style="height: 100%; margin: 0; padding: 0;">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<title>Google Earth Builder - Custom Google Map Tiles</title>

<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
	// create a new map variable to hold the Google Maps API
	var map = null;

	// setup a service variable, default to a GEB service
	var svc = "16143158689603361093-17822223599500043129-4";

	// function to initialize Google Map
	function initialize() {
		var myOptions = {
			zoom : 15,
			center : new google.maps.LatLng(9.993608,-84.210127),
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		// create the new map canvas
		map = new google.maps.Map(document.getElementById('map_canvas'),
				myOptions);

		// determine if there is a svc variable in the query string
		// if so, use the user requested service
		// (i.e. ?svc=16143158689603361093-08819110870894881606-2)
		if (gup("svc") != null && gup("svc").length > 0) {
			svc = gup("svc");
		}

		// add the custom overlay to the Google Map
		map.overlayMapTypes.insertAt(0, gebMapType);
	}

	// create a map tile options object to house the
	// custom map overlay function
	// basically, overwriting the URL
	
	var gebimagetileOptions = {
		getTileUrl : function(coord, zoom) {
			return "https://earthbuilder.google.com/" + svc
					+ "/32/maptile/maps?s=Gali&v=2&x=" + coord.x + "&y=" + coord.y
					+ "&z=" + zoom + "&s=&authToken="  + $('#token_id').text();
		},
		tileSize : new google.maps.Size(256, 256),
		isPng : true
	};

	// simple oauth function
	var WaitForToken = function() {
		if (!g_iframe || !g_iframe.contentDocument.location.hash) {
			setTimeout(WaitForToken, 1000);
			return;
		}

		var hash_value = g_iframe.contentDocument.location.hash;
		if (hash_value[0] == "#") {
			hash_value = hash_value.slice(1);
		}

		var hash_parts = hash_value.split("&");
		for ( var i = 0; i < hash_parts.length; ++i) {
			var name_value = hash_parts[i].split("=");
			if (name_value.length == 2) {
				var name = name_value[0];
				var value = name_value[1];
				if (name == "access_token") {
					$('#token_id').text(value);
					//alert('new token value: ' + value);
					document.body.removeChild(g_iframe);
					g_iframe = null;
					break;
				}
			}
		}

	};

	// get user defined variable in the query string
	function gup(name) {
		name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		var regexS = "[\\?&]" + name + "=([^&#]*)";
		var regex = new RegExp(regexS);
		var results = regex.exec(window.location.href);
		if (results == null)
			return "";
		else
			return results[1];
	}

	// create a new map type to house the GEB custom overlay
	var gebMapType = new google.maps.ImageMapType(gebimagetileOptions);

	// once the document is completely loaded and ready, fetch an OAuth Token
	// then load and initialize the Google Map canvas
	function delayLoadClick()
	{
		var hash_value = window.location.hash;
		if (!hash_value) {
			var redirect_url = "https://accounts.google.com/o/oauth2/auth";
			redirect_url += "?client_id=739002539507.apps.googleusercontent.com";
			redirect_url += "&redirect_uri=http://geoy-geb.appspot.com/Apps/SimpleCustomGoogleMapOverlay.jsp";
			redirect_url += "&scope=https://www.googleapis.com/auth/earthbuilder.readonly";
			redirect_url += "&response_type=token";
			window.location = redirect_url;
			return;
		}

		if (hash_value[0] == "#") {
			hash_value = hash_value.slice(1);
		}

		var hash_parts = hash_value.split("&");
		for ( var i = 0; i < hash_parts.length; ++i) {
			var name_value = hash_parts[i].split("=");
			if (name_value.length == 2) {
				var name = name_value[0];
				var value = name_value[1];
				if (name == "access_token") {
					$('#token_id').text(value);
					g_oauth_token_value = value;
					break;
				}
			}
		}

		if (!g_oauth_token_value) {
			return;
		} else {
			// load the google map
			initialize();
		}
	}

	window.onload = delayLoadClick;
</script>

</head>
<body style="height: 100%; margin: 0; padding: 0;">
<div id="map_canvas" style="height: 100%;"></div>
<span id="token_id" style="visibility: hidden;"></span>
</body>
</html>
